const path = require("path")
const Mock = require("mockjs")
const WebpackBar = require('webpackbar'); // 引入进度条
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
let data = Mock.mock({
    "list|5":[
        {
            "tit":"@ctitle",
            "img":"@Image(375x100,@color)"
        }
    ]
})

module.exports  = {
    mode:"development",// 开发环境
    entry:["./src/index.js","./src/index1.js"],// 入口
    // 出口
    output:{
        path: path.join(__dirname, 'dist'), // 出口文件夹
        filename: '[hash:3].bondle.js', // 出口的文件名
        clean:true
    },
    // 放loader的对象
    module: {
        rules: [
          {
             test: /\.(css|scss|less)$/,
            // test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader","sass-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|eot|svg|ttf|woff2|woff)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ],
    },
    // 实例化进度条
    plugins: [new HtmlWebpackPlugin({
        template: "./index.html",// 打包的时候以谁为模板
        filename: "index.html" // 在dist文件夹中打完包后的html名
    }),
        new MiniCssExtractPlugin({
            filename: "css/style.css" // 在dist文件夹中打完包后的html名
        }),
        new WebpackBar()
    ],
    devServer:{
        host: 'localhost', 
        port: 7071,
        hot:true,
        open: true,
        before(app){
            app.get("/list",(req,res)=>{
                res.json(data.list)
            })
        }
    },
    //  resolve是用来解析的
    resolve:{
        extensions: [".js", ".json",".css"] ,//  extensions是省略后缀名的
        alias: { // 配置路径
            "@": path.resolve(__dirname, 'src/'),
          }
    },
    devtool:'eval-source-map'
}